<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>项目表头</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .clearfix:after{
        content: "";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }

    h3,p,div,dl,ul,dd,dt,li,body{
        margin: 0;
        padding: 0;
    }
    a{
        color: black;
        text-decoration: none;
    }
    a:hover{
        color: blue;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }

    /*头部区域*/
    #box{
        width: 380px;
        height:30px;
        margin: 25px auto;
        font-family: '楷体';
        font-size: 20px;
    }
    input{
        width: 260px;
        border: 1px solid #EE7942;
        height: 30px;
        float: left;
        font-size: 16px;
        background-image: url(images/search.jpg);
        background-repeat: no-repeat;
        background-size: 25px;
        background-position:5px center;
        padding:0 0 0 40px;
    }
    #search{
        width: 78px;
        height: 32px;
        float: right;
        background:	#EE7942;
        color: white;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
    }
    .wrapperb{
        width:1200px;
        height:80px;
        margin-left: 20%;
    }


    /*header区域*/
    .wrappera{
        width: 100%;
        height: 40px;
        background: #43CD80;
    }

    .wrappera ul{
        float: left;
    }
    .top-nav{
        width: 43%;
        margin-left: 25%;
    }
    .top-nav>li{
        font-size:25px;
        float: left;
        list-style: none;
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .top-nav>li a{
        color: white;
    }
    .top-nav>li.home{
        background: #4EEE94;
    }
    .top-nav>li:hover{
        background: #4EEE94;
    }


    .top-nas>li{
        font-size:20px;
        float: right;
        list-style: none;
        height: 40px;
        line-height: 40px;
        text-align: center;

    }

    .top-nas>li a{
        color: white;
        margin:10px 10px;
    }
    .top-nas>li a:hover{
        color:#EE7942;
    }

</style>
<body>
<header>
    <div class="wrapperb">
        <img class="fl clearfix" src="1.png" style="margin-right:10%;">
        <div  class="fl clearfix" id="box">
            <!--  <div></div> -->
            <input type="text" name="search" placeholder="请输入关键字">
            <div id="search">搜索</div>
        </div>
        <img  class="fl clearfix" src="2.png" style="margin-left: 10%;">
    </div>

    <div class="wrappera">
        <ul class="top-nav clear-fix">
            <li class="home"><a href="#" >首页</a></li>
            <li ><a href="#" >酒店</a></li>
            <li><a href="#" >景点</a></li>
            <li><a href="#" >攻略</a></li>
        </ul>
        <ul class="top-nas clear-fix">
            <li class="hone"><a href="#">注册</a></li>
            <li class="hone">|</li>
            <li class="hone"><a href="#">登录</a></li>
        </ul>
    </div>
</header>
</body>
</html>
